<template>
  <el-carousel >
    <el-carousel-item v-for="item in array" :key="item.id">
      <img :src="item.src" class="image" />
    </el-carousel-item>
  </el-carousel>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      array: [
        { id: 1, src: require("@/assets/南华1.jpg") },
        { id: 2, src: require("@/assets/南华2.png") },
        { id: 3, src: require("@/assets/南华3.png") },
      ],
    };
  },
};
</script>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  height: 30%;
  margin: 0;
}
.image {
  height: 100%;
  width: 100%;
}
.el-carousel {
  height: 22%;
}
.el-carousel__container {
  height: 100%;
}
.el-carousel__indicators--outside {
  height: 20%;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
